<template>
  <el-col class="info-wrapper" :span="23">
    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">生产企业</span>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">工厂人数</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">组织人数</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">工厂名称</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">注册地址</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">通讯地址</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">生产地址</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">县/区级地址</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">县/区级代码</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">分公司</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">组织联系传真</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">联系人</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">联系人职务</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">联系人手机</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">联系人邮箱</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">法人</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">管理者代表</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" style="border-bottom: 1px solid #bbb;" :span="24">
          <el-col class="col-content title-span" style="height: 23px;" :span="6">备注</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">项目信息</span>
        <el-table border :data="uploadDocumentData">
          <el-table-column prop="date" label="合同编号"> </el-table-column>
          <el-table-column prop="date" label="委托人"> </el-table-column>
          <el-table-column prop="date" label="生产者"> </el-table-column>
          <el-table-column prop="date" label="生产企业"> </el-table-column>
          <el-table-column prop="date" label="小类"> </el-table-column>
          <el-table-column prop="date" label="产品名称"> </el-table-column>
          <el-table-column prop="date" label="产品型号"> </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">证书信息</span>
        <el-table border :data="uploadDocumentData">
          <el-table-column prop="date" label="证书编号"> </el-table-column>
          <el-table-column prop="date" label="发证日期"> </el-table-column>
          <el-table-column prop="date" label="证书有效期至"> </el-table-column>
          <el-table-column prop="date" label="换证日期"> </el-table-column>
          <el-table-column prop="date" label="型号"> </el-table-column>
          <el-table-column prop="date" label="状态"> </el-table-column>
        </el-table>
        <el-col style="border: 1px solid #bbb;" :span="24">
          <el-col class="book-record">证书变更记录>></el-col>
          <el-col style="padding: 8px;">
            <div style="margin-bottom: 8px;">证书编号：2021172301000005</div>
            <el-table border :data="bookChangeInfoData">
              <el-table-column
                prop="date"
                label="变更类型">
              </el-table-column>
              <el-table-column
                prop="date"
                label="变更内容">
              </el-table-column>
              <el-table-column
                prop="date"
                label="变更日期">
              </el-table-column>
              <el-table-column
                prop="date"
                label="暂停到期">
              </el-table-column>
              <el-table-column
                prop="date"
                label="审批日期">
              </el-table-column>
              <el-table-column
                prop="date"
                label="备注">
              </el-table-column>
            </el-table>
          </el-col>
        </el-col>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">证书内容变更</span>
        <el-col :span="8">
          <el-checkbox>1、商标更改</el-checkbox>
        </el-col>
        <el-col :span="8">
          <el-checkbox>2、由于产品命名方法的变化引起的获证产品名称、型号更改</el-checkbox>
        </el-col>
        <el-col :span="8">
          <el-checkbox>3、产品型号更改、不影响电器安全的内部结构不变（经判断不涉及安全和电磁兼容问题）</el-checkbox>
        </el-col>
        <el-col :span="8">
          <el-checkbox>4、在证书上增加同种产品其他型号</el-checkbox>
        </el-col>
        <el-col :span="8">
          <el-checkbox>5、在证书上减少同种产品其他型号</el-checkbox>
        </el-col>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">证书状态变更</span>
      </el-tab-pane>
    </el-tabs>

    <el-col class="row-content" :span="24">
      <el-col class="col-content title-span" :span="6">申请变更时间</el-col>
      <el-col class="col-content" :span="18"><span></span></el-col>
    </el-col>
    <el-col class="row-content" :span="24">
      <el-col class="col-content title-span" :span="6">变更原因</el-col>
      <el-col class="col-content" :span="18">
        <el-select
          v-model="searchParams.province"
          placeholder="请选择"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-col>
    <el-col class="row-content" :span="24">
      <el-col class="col-content title-span" style="height: 96px;" :span="6">变更前</el-col>
      <el-col class="col-content" :span="18">
        <el-input style="width: 500px;" type="textarea" :rows="4" v-model="searchParams.groupId"></el-input>
      </el-col>
    </el-col>
    <el-col class="row-content" :span="24">
      <el-col class="col-content title-span" style="height: 96px;" :span="6">变更后</el-col>
      <el-col class="col-content" :span="18">
        <el-input style="width: 500px;" type="textarea" :rows="4" v-model="searchParams.groupId"></el-input>
      </el-col>
    </el-col>
    <el-col class="row-content" style="border-bottom: 1px solid #bbb;" :span="24">
      <el-col class="col-content title-span" style="height: 96px;" :span="6">变更备注</el-col>
      <el-col class="col-content" :span="18">
        <el-input style="width: 500px;" type="textarea" :rows="4" v-model="searchParams.groupId"></el-input>
      </el-col>
    </el-col>
    <el-col class="submit-btn" :span="24">
      <el-button type="primary" @click="submit">提交</el-button>
    </el-col>
  </el-col>
</template>

<script>
export default {
  name: 'projectMaintenanceDetail',
  data() {
    return {
      defulatParams: {
        companyName: "", // 企业名称
        groupId: "", // 组织代码
        province: "", // 省份
        contacts: "", // 联系人
        companyId: "" // 工厂编号
      },
      searchParams: {
        ...this.defulatParams,
      },
    };
  },
  mounted() {
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
.info-wrapper {
  font-family: Source Han Sans CN;
  font-weight: 400;
  height: 100%;

  .tabs-card {
    margin-bottom: 15px;
  }

  .row-content {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
  }

  .title-span {
    text-align: center;
    background-color: #f0f5f8;
    justify-content: end;
    padding-right: 20px;
  }

  .col-content {
    min-height: 40px;
    border-right: 1px solid #bbb;
    padding-left: 4px;
    display: flex;
    align-items: center;
  }

  .table-span {
    padding: 8px;
    border-right: 1px solid #bbb;
  }
}

/deep/ .el-input__icon {
  line-height: 30px;
}

/deep/ .el-checkbox__label {
  width: 350px;
  display: inline-grid;
  white-space: pre-line;
  word-wrap: break-word;
  overflow: hidden;
  line-height: 20px;
}

.submit-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}

.book-record {
  border-bottom: 1px solid #bbb;
  height: 25px;
  padding-left: 8px;
}
</style>
